<template>
    <div>
        <el-upload :action="url + '/file/uploadFileInterface'" list-type="picture-card" :headers="headers"
            :file-list="fileList" :on-success="handleSuccess" :on-change="handleChange" :before-upload="beforeAvatarUpload">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}" style="display:flex;align-items: center;">
                <img class="el-upload-list__item-thumbnail" v-if="!file.fileType||file.fileType =='image'" :src="file.response?file.url:url+file.filePath" alt="">
                <video
					v-else-if="file.fileType =='video'"
					class="el-upload-list__item-thumbnail"
					style="width: 100%;height: 100%;"
                    disabled="false" controls="false"
					:src="file.response?file.url:url+file.filePath">
					<source :src="file.response?file.url:url+file.filePath" type="video/mp4" />
					<source :src="file.response?file.url:url+file.filePath" type="video/mov" />
					<source :src="file.response?file.url:url+file.filePath" type="video/avi" />
				</video>
                <span class="el-upload-list__item-actions">
                    <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                        <i class="el-icon-zoom-in"></i>
                    </span>
                    <!-- <span class="el-upload-list__item-delete" @click="handleDownloadImg(file)">
                        <i class="el-icon-download"></i>
                    </span> -->
                    <span class="el-upload-list__item-delete" @click="handleRemoveImg(file)">
                        <i class="el-icon-delete"></i>
                    </span>
                </span>
            </div>
        </el-upload>
        <el-dialog :visible.sync="dialogVisibleImg" :append-to-body="true" width="50%" style="height: 100%;">
            <div style="height: 60%;">
                <img style="max-width: 100%;" :src="dialogImageUrl" alt="">
            </div>

        </el-dialog>
        <el-dialog :visible.sync="dialogVisibleVideo" :append-to-body="true" width="50%" style="height: 100%;">
            <div style="height: 60%;">
                <!-- <img style="max-width: 100%;" :src="dialogImageUrl" alt=""> -->
                <video controls  style="max-width: 100%;" :autoplay="true" :src="dialogImageUrl" :show-fullscreen-btn="false"></video>
            </div>

        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    data() {
        return {
            fileList: [],
            url: process.env.VUE_APP_BASE_API,
            headers: {
                token: getToken() //从cookie里获取token，并赋值  Authorization ，而不是token
            },
            dialogVisibleImg:false,
            dialogVisibleVideo:false,
            dialogImageUrl:'',
        }

    },
    props:{
        fileImgList:{
            type:Array
        },
        name:{
            type:String
        }
    },
    watch:{
		fileImgList: {
			handler(newVal, oldVal) {
				this.fileList = newVal;
			},
			deep: true,
			immediate: true
		},
	},
    methods: {
        handleSuccess(response, file, fileList) {
            console.log(fileList)
            if (response.code == 200) {
                let data=[]
                for(let i = 0; i < fileList.length; i++){
                    if(fileList[i].response){
                        data.push({
                            filePath:fileList[i].response.map.filePath,
                            fileName:fileList[i].response.map.fileName
                        })
                    }else{
                        data.push({
                            filePath:fileList[i].filePath,
                            fileName:fileList[i].fileName
                        })
                    }
                }
                this.fileList = data
            } else {
                for (let i = 0; i < fileList.length; i++) {
                    if (fileList[i].uid == file.uid) {
                        fileList.splice(i, 1);
                    }
                }
                this.$message({ message: response.msg, type: 'error', duration: 1000 })
            }
            let data=this.backData()
            this.$emit('success',{name:this.name,data:data} );
        },
        handleRemoveImg(file) {
            console.log(file, this.fileList);
            for (let i = 0; i < this.fileList.length; i++) {
                if (this.fileList[i].uid == file.uid) {
                    this.fileList.splice(i, 1);
                }
            }
            let data=this.backData()
            this.$emit('success',{name:this.name,data:data} );
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.response?this.url+file.response.map.filePath:this.url+file.filePath;
            if(file.filePath.indexOf('.jpg') > -1|| file.filePath.indexOf('.png') > -1|| file.filePath.indexOf('.jpeg') > -1){
                this.dialogVisibleImg = true;
            }
            if(file.filePath.indexOf('.mp4') > -1|| file.filePath.indexOf('.mov') > -1|| file.filePath.indexOf('.avi') > -1){
                this.dialogVisibleVideo= true;
            }
            
        },
        handleDownloadImg(file) {
            this.fileDown2(file);
        },
        beforeAvatarUpload(file) {
            console.log(file)
            let hz = file.name.split('.')[(file.name.split('.')).length - 1]
            // const isJPG = file.type === "image/jpg";

            //1MB=1024*1024(1MB=1024KB 1KB=1024MB)
            const is2M = file.size / 1024 / 1024 < 2;
            let isImgType = ['png', 'jpg', 'jpeg','mp4']
            console.log(hz)
            //限制文件上传类型
            if (isImgType.indexOf(hz)==-1) {
                this.$message.error("文件上传格式有'png', 'jpg', 'jpeg','mp4'!");
                return false
            }
            if (!is2M) {
                this.$message.error("上传文件大小不能超过 2MB!");
                return false
            }

      return true
    },
        handleChange(file, fileList) {
            // this.fileList = fileList;
        },
        backData(){
            let data=[]
            for(let i=0;i<this.fileList.length;i++){
                if(this.fileList[i].response){
                    if(this.fileList[i].filePath.indexOf('.jpg') > -1|| this.fileList[i].filePath.indexOf('.png') > -1|| this.fileList[i].filePath.indexOf('.jpeg') > -1){
                        data.push({filePath:this.fileList[i].response.map.filePath,fileType:'image',fileName:this.fileList[i].response.map.fileName})
                    }
                    if(this.fileList[i].filePath.indexOf('.mp4') > -1|| this.fileList[i].filePath.indexOf('.mov') > -1|| this.fileList[i].filePath.indexOf('.avi') > -1){
                        data.push({filePath:this.fileList[i].response.map.filePath,fileType:'video',fileName:this.fileList[i].response.map.fileName})
                    }
                    
                }else{
                    if(this.fileList[i].filePath.indexOf('.jpg') > -1|| this.fileList[i].filePath.indexOf('.png') > -1|| this.fileList[i].filePath.indexOf('.jpeg') > -1){
                        data.push({filePath:this.fileList[i].filePath,fileType:'image',fileName:this.fileList[i].fileName})
                    }
                    if(this.fileList[i].filePath.indexOf('.mp4') > -1|| this.fileList[i].filePath.indexOf('.mov') > -1|| this.fileList[i].filePath.indexOf('.avi') > -1){
                        data.push({filePath:this.fileList[i].filePath,fileType:'video',fileName:this.fileList[i].fileName})
                    }
                }
            }
            return data
        }
    }
}
</script>
<style lang="scss" scoped>
	::v-deep .el-upload-list__item.is-ready,
	::v-deep .el-upload-list__item.is-uploading {
  		display: none !important;
	}
</style>
<style>

</style>